<template>
    <div class="all">
        <div classs="repair" v-if="this.tabIndex == 1">
            <button-tab style="width:70%;">
                <button-tab-item selected @on-item-click="onSelect(1)">公共报修</button-tab-item>
                <button-tab-item @on-item-click="onSelect(0)">个人报修</button-tab-item>
            </button-tab>


            <div class="center1" v-if="this.index == 1">
                <group>
                    <x-input title="门牌号码：" v-model="value" placeholder="A-102" style="margin-top:.5rem;"></x-input>
                </group>
                <group>
                    <popup-radio title="报修类型：" :options="options1" v-model="option1" value-text-align="left"></popup-radio>
                </group>
                <group>
                    <x-textarea :max="20" placeholder="请您描述故障问题" style="line-height:1rem;"></x-textarea>
                </group>
                <input type="button" value="上传公共报修信息" class="tj">
            </div>

            <div class="center2" v-if="this.index == 0">
                <group>
                    <x-input title="门牌号码：" v-model="value" placeholder="A-103" style="margin-top:.5rem;"></x-input>
                </group>
                <group>
                    <popup-radio title="报修类型：" :options="options2" v-model="option2" value-text-align="left"></popup-radio>
                </group>
                <group>
                    <x-textarea :max="20" placeholder="请您描述家中故障问题" style="line-height:1rem;"></x-textarea>
                </group>
                <input type="button" value="上传个人报修信息" class="tj">
            </div>
        </div>
        
        <div class="repairList" v-if="this.tabIndex == 0">
            <button-tab style="width:70%;">
                <button-tab-item selected @on-item-click="onSelect(2)">待处理</button-tab-item>
                <button-tab-item selected @on-item-click="onSelect(1)">处理中</button-tab-item>
                <button-tab-item selected @on-item-click="onSelect(0)">已完成</button-tab-item>
            </button-tab>

            <div class="repaitList1">
                <div><span></span>201808060000001</div>   
                <div><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3290567491,4102372164&fm=27&gp=0.jpg"/>等待分配维修人员<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533553755935&di=55226bd14cfbcef54967168ee26e59b5&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F22%2F79%2F59%2F75g58PICUTj_1024.jpg"/></div>
                <div>1/1/104</div>
                <div>2018-08-06 14:00提单</div>
                <div>公共电梯</div>     
            </div>   


            <div class="repaitList1">
                <div><span></span>201808060000001</div>   
                <div><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3290567491,4102372164&fm=27&gp=0.jpg"/>等待分配维修人员<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533553755935&di=55226bd14cfbcef54967168ee26e59b5&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F22%2F79%2F59%2F75g58PICUTj_1024.jpg"/></div>
                <div>1/1/104</div>
                <div>2018-08-06 14:00提单</div>
                <div>公共电梯</div>     
            </div>    
        </div>
        
        <div class="bottomTab">
            <div @click="onSelectTab(1)">快捷报修</div>
            <div @click="onSelectTab(0)">维修记录</div>
        </div>
    </div>
</template>


<script>
import { Actionsheet,Tab, TabItem,PopupRadio,XTextarea, Group, XInput,ButtonTab, ButtonTabItem, Divider,Flow, FlowState, FlowLine,Timeline,FormPreview    } from 'vux'
export default {
    components: {
        Actionsheet,Tab,TabItem,XTextarea,PopupRadio,Group,XInput,ButtonTab,ButtonTabItem,Divider,Flow,FlowState,FlowLine,Timeline,FormPreview
    },
    data () {
    return {
        index:1,
        tabIndex:1,
        option1: '公共电梯',
        options1: ['公共电梯', '公共楼梯', '公共防盗门'],
        option2: '疏通下水道',
        options2: ['疏通下水道', '水管漏水', '马桶堵塞'],
        list: [{
            label: 'Apple',
            value: '3.29'
        }, {
            label: 'Banana',
            value: '1.04'
        }, {
            label: 'Fish',
            value: '8.00'
        }]
      }
    },
    methods: {
    onEvent (event) {
      console.log('on', event)
    },
    onSelect (e){
      this.index=e;
    },
    onSelectTab (e){
        this.tabIndex=e 
    }
  }
}
</script>


<style>
#app{
    text-align: left;
}
.vux-button-group{
    margin:0 auto;
}
.vux-button-group > a.vux-button-tab-item-first::after,.vux-button-group > a.vux-button-tab-item-last::after,.vux-button-group > a.vux-button-tab-item-middle::after{
    border:1px solid #12a7eb !important;
}
a.vux-button-tab-item-middle::after{
    border:1px solid #12a7eb !important;
}
.vux-button-group > a.vux-button-group-current{
    background: #12a7eb !important;
}
.vux-no-group-title{
    line-height: .5rem!important;  
    margin:0px!important;
    padding:0px!important;
    border-bottom:1px solid #D9D9D9;
}
.weui-cells::before{
    border:0px !important;
}
.bottomTab{
    border:1px solid #D9D9D9;
    position: fixed;
    bottom:0px;
    width:100%;
    line-height: 1.5rem;
    color:#12a7eb;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    background:#fff;
}
.bottomTab div{
    text-align: center;
    width:50%;
}
.bottomTab div:first-child{
    border-right:1px solid #D9D9D9;
}
.repaitList1{
    /* border-top:.5rem solid rgba(243,243,243,1); */
    border-bottom:.5rem solid rgba(243,243,243,1);
    margin-top:.5rem;
}
.repaitList1 div{
    padding:.3rem;
    padding-left:.5rem;
    border-bottom:1px solid #d9d9d9;
}
.repaitList1 div:before{
    content: "";
    display: inline-block;
    width:5px;
    height:5px;
    background:#12a7eb;
    margin-right:.3rem;
    border-radius: 50%;
}
.repaitList1 div:nth-of-type(2){
    position:relative;
}
.repaitList1 img{
    width:2rem;
    height:2rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right:.5rem;
}
.repaitList1 img:last-child{
    width:1rem;
    height:1rem;
    border-radius: 50%;
    vertical-align: middle;
    position:absolute;
    right:0px;
    top:30%;
}
.tj{
    background:#12a7eb;
    color:#fff;
    border:0px;
    line-height: 1.5rem;
    width:70%;
    display: block;
    margin:1rem auto;
}


</style>
